<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <script src="https://cdn.bootcss.com/quagga/0.12.1/quagga.min.js"></script>
	<style type="text/css">
		#canvanCode{
			position: relative;
		}
		.line{
			height: 10px;
			width: 500px;
			background: red;
			position: absolute;
			z-index: 999;
			top:0;
		}
	</style>
</head>
<body>
	<h1>特别注意：必须使用ssl安全域名才能在手机使用</h1>
    <div id="canvanCode">
		<div class="line"></div>
	</div>
    <script>
        Quagga.init({
			numOfWorkers: 2,	//线程数
			locate: true,		//跟踪条形码位置
			locator: {
                patchSize: "large",
            },
            inputStream : {
                name : "Live",
                type : "LiveStream",
                target: document.querySelector('#canvanCode'),    // Or '#yourElement' (optional)
				constraints: {
					width: 500,
					height: 500,
					facingMode: "environment",
				},
				singleChannel: false // true: only the red color-channel is read
            },
            decoder : {
                readers : ['code_128_reader'],
                multiple: false
            }
        }, function(err) {
            if (err) {
                alert(err);
                return
            }
            console.log("Initialization finished. Ready to start");
            Quagga.start();

//            Quagga.onProcessed(function(data){
//                console.log(data)
//            })
            Quagga.onDetected(function(data){	//结果
                console.log(data)
                alert(data.codeResult.code)
            })
			
			
			var $line = document.querySelector(".line"),lineTop=0
			setInterval(function() {
				if(lineTop<=500){
					lineTop++
				}else{
					lineTop=0
				}
				$line.style.top = lineTop+"px"
			},1)
        });
    </script>
</body>
</html>